<template>
    <div class="campusbox">
        <div class="searchbox">
            <el-input v-model="user.idortitle" placeholder="请输入查询内容" />
            <el-button type="primary" class="but" @click="watchdata">查询</el-button>
            <el-button type="success" @click="toadd">添加</el-button>
            <el-button type="danger" @click="dels">批量删除</el-button>
        </div>
        <div class="frombox"> 
            <froms :tableData="datalist" :tableHeader="tableHeader" @updata="updata" @deldata="deldata" @particulars="particulars"  @delAll="delAll" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref , onMounted,toRefs} from 'vue';
import {newlist ,delnews} from '../../api/admin3'
import froms from '../../components/from/from.vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const router = useRouter();
const input = ref('')

const toadd = () => {
    router.push('/campusadd')
}

const user =reactive<any>({
    page:1,
    pageSize:10,
    idortitle:''
})
const datalist = reactive<any>([])
let total = ref<any>()

const getData = async () => {
    const res: any = await newlist(user)
    // console.log(res)
    if (res.code == 10000) {
        Object.assign(datalist, res.data.list);
        // console.log(datalist)
        total = res.data.total
    }

}
const watchdata=()=>{
    user.page=1
    user.pageSize=10
    getData()
}
const updata=(val:any)=>{
    console.log(val)
    router.push({
        path: '/campusadd',
        query: {
            newsid:val.news_id
        }
    })
}
let ids=reactive<any>([])
const delAll=async(val:any)=>{
 
    ids=val.map((item:any)=>{
        return item.news_id
    })
    ids = ids.map(String).join(',');
    console.log(ids)
}

const deldata=async (val:any)=>{
    console.log(val.news_id)
    let res :any =await delnews({news_id:val.news_id})
    console.log(res)
    if (res && res.code === 10000) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
    } else {
        ElMessage({
            message: res.message,
            type: 'error',
        })
    }
}

const dels=async()=>{
    console.log(ids)
    let res :any =await delnews({news_id:ids})
    console.log(res)
    if (res && res.code === 10000) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
    } else {
        ElMessage({
            message: res.message,
            type: 'error',
        })
    }
}

const particulars=(val:any)=>{
  console.log(val)
  router.push({
    path: '/onelist',
    query: {
        news_id: val.news_id
    }
  })
}
const tableHeader=ref<Array<any>>([
        {
            label:'标题',
            prop:'title'
        },
        {
            label:'作者',
            prop:'author'
        },
        {
            label:'关键字',
            prop:'keywords'
        },
        {
        label:'操作',
        type:'button',
        buttons:[
             {
                text: '修改',
                event: 'updata',
                type: 'success',
                show: true,
            },
            {
                text: '删除',
                event: 'deldata',
                type: 'danger',
                show: true,
            },
            {
                text: '详情',
                event: 'particulars',
                type: 'info',
                show: true,
            },
        ]
    }
])

onMounted(() => [
    getData()
])
</script>

<style scoped lang="less">
.campusbox {
    width: 100%;
    height: 100%;
    // background-color: rebeccapurple;
    border-top: 1px solid #fff;

    .searchbox {
        width: 480px;
        height: 34px;
        // background-color: cadetblue;
        margin-left: 30px;
        margin-top: 30px;
        display: flex;
    }

    .el-input {
        height: 30px;
    }

    .but {
        margin-left: 20px;
    }

    .frombox {
        margin-left: 30px;
        margin-top: 20px;
    }
}

.btm {
    float: right;
    margin-top: 20px;
}
</style>